{include file="common/header"}
<link rel="stylesheet" type="text/css" href="/themes/template/static/css/element.min.css">
<script type="text/javascript" src="/themes/template/static/js/vue.min.js"></script>
<script type="text/javascript" src="/themes/template/static/js/element.min.js"></script>
<div id="app" v-cloak>
	<div class="el-crumbs">
		<div class="el-warp">
			{volist name="crumbs" id="item"}
			<a class="{if $item.id == $catalog.id}acitve{/if}" href="{$item.url}">{$item.title}<i class="el-icon-caret-right"></i></a>
			{/volist}
		</div>
	</div>
	<div class="mian">
		<div class="el-warp">
			<el-row :gutter="30">
				<el-col :md="8" :sm="24">
					<div class="sidebar">
						<div class="search">
							<el-input placeholder="搜索" v-model="keyword">
								<el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
							</el-input>
						</div>
						<div class="widget">
							<div class="title">推荐产品</div>
							<ul>
								{volist name=":product(['isrecommend'])" id="item"}
								<li>
									<a href="{$item.url}">
										{$item.title}<img src="{$item.cover}">
									</a> 
								</li>
								{/volist}
							</ul>
						</div>
						<div class="catalog">
							<div class="title">产品分类</div>
							<ul>
								{volist name=":catalog_child($catalog.level1)" id="item"}
								<li><a href="{$item.url}">{$item.title} <span>({$key + 1})</span></a></li>
								{/volist}
							</ul>
						</div>
					</div>
				</el-col>
				<el-col :md="16" :sm="24">
					<el-row :gutter="30">
						{volist name="list" id="item"}
						<el-col :md="12" :sm="24">
							<div class="item">
								<div class="image">
									<a href="{$item.url}">
										<img src="{$item.cover}">
									</a>
								</div>
								<div class="content">
									<h3><a href="{$item.url}">{$item.title}</a></h3> 
									<p>{$item.description}</p> 
									<a href="{$item.url}" class="btn"><span>查看更多</span></a>
								</div>
							</div>
						</el-col>
						{/volist}
					</el-row>
					{$page|raw}
				</el-col>
			</el-row>
		</div>
	</div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                route: "{$catalog.route}",
                keyword: locationUrl.get('keyword'),
            }
        },
        methods: {
            search() {
                location.href = index_url(this.route, {keyword: this.keyword});
            }
        }
    })
</script>
{include file="common/footer"}